<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"></meta>
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.ApiImplController"
         class="page container"
         data-field="page"
         ng-cloak=""
         ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/api/api_bc.include'"></div>
      <!-- Entity Summary Row -->
      <div ng-include="'plugins/api-manager/html/api/api_entity.include'"></div>

      <!-- Navigation + Content Row -->
      <div class="row">
        <!-- Left hand nav -->
        <div ng-include="'plugins/api-manager/html/api/api_tabs.include'"></div>
        <!-- /Left hand nav -->

        <!-- Content -->
        <div class="col-md-10 apiman-entity-content">
          <div class="col-md-8">
            <form name="apiImplForm" novalidate>
            <div class="title"
                 apiman-i18n-key="api-impl">API Implementation</div>
            <div class="apiman-label-faded">
              <p apiman-i18n-key="api-impl-explanation">
                Please provide us with details about the back-end API implementation
                so that the API Gateway can successfully proxy API requests.  Please
                include any security you wish to enable between the API Gateway and the
                back-end API.
              </p>
            </div>
            <div>
              <span apiman-i18n-key="api-endpoint-label">API Endpoint:</span>
              <input ng-model="updatedApi.endpoint"
                     data-field="endpoint"
                     name="endpoint"
                     class="apiman-form-control form-control"
                     type="text"
                     ng-disabled="isEntityDisabled()">
            </div>
            <div style="color: #ff0000" ng-show="invalidEndpoint === true">
              <p apiman-i18n-key="invalid-endpiont-msg">Please enter a valid endpoint that begins with http:// or https://.</p>
            </div>
            <div style="margin-top: 10px">
              <span class="clearfix"
                    apiman-i18n-key="api-type-label">API Type:</span>
              <ui-select ng-model="updatedApi.endpointType"
                         ng-disabled="isEntityDisabled()"
                         style="width: 30%; max-width: 300px;">
                <ui-select-match placeholder="Choose a type..."
                                 apiman-i18n-key="api-impl.choose-type">
                  <span ng-bind="$select.selected.toUpperCase()"></span>
                </ui-select-match>
                <ui-select-choices repeat="type in (typeOptions | filter: $select.search) track by type">
                  <span ng-bind="type.toUpperCase()"></span>
                </ui-select-choices>
              </ui-select>
            </div>
            <div style="margin-top: 10px">
              <span class="clearfix"
                    apiman-i18n-key="api-content-type-label">API Content Type:</span>
              <ui-select ng-model="updatedApi.endpointContentType"
                         ng-disabled="isEntityDisabled()"
                         name="endpointContentType"
                         style="width: 30%; max-width: 300px;">
                <ui-select-match placeholder="Choose a content type..."
                                 apiman-i18n-key="api-impl.choose-content-type">
                  <span ng-bind="$select.selected.toUpperCase()"></span>
                </ui-select-match>
                <ui-select-choices repeat="ct in (contentTypeOptions | filter: $select.search) track by ct">
                  <span ng-bind="ct.toUpperCase()"></span>
                </ui-select-choices>
              </ui-select>
            </div>

            <div style="margin-top: 10px">
              <input ng-model="updatedApi.parsePayload"
                     type="checkbox"
                     id="parse-payload"
                     ng-disabled="isEntityDisabled()"></input>
              <label for="parse-payload"
                     apiman-i18n-key="parse-payload-msg"
                     style="padding-left: 3px">Enable stateful request payload inspection</label>
              <a apiman-i18n-key="parse-payload-tooltip" type="button" href="javascript:void(0)" class="" data-toggle="popover" title="Stateful Payload Inspection" data-close="true" data-content="If this feature is enabled, the Gateway will parse the request body into an object prior to applying the policies.  This allows policies to make decisions based on the content of the request payload, but slows down the Gateway a bit.">
                <span class="pficon pficon-info"></span>
              </a>
            </div>
            
            <div class="" style="margin-top:10px;"
                 ng-show="updatedApi.parsePayload">
              <div class="alert alert-info">
                 <span class="pficon pficon-info"></span>
                 <span apiman-i18n-key="api-impl.parse-payload-info">Note that enabling this option may result in additional performance overhead.  However, this feature is sometimes required for certain policies to work (in particular many SOAP policies).</span>
              </div>
            </div>
            
            <div class="" style="margin-top:10px;">
              <span class="clearfix"
                    apiman-i18n-key="api-security-label">API Security:</span>
              <ui-select ng-model="apiSecurity.type"
                         ng-disabled="isEntityDisabled()"
                         on-select="setEndpointProperties($item)"
                         style="width: 30%; max-width: 300px;">
                <ui-select-match>
                  <span ng-bind="$select.selected.label"></span>
                </ui-select-match>
                <ui-select-choices repeat="option.type as option in (apiSecurityTypeOptions | filter: $select.search) track by option.type">
                  <span ng-bind="option.label"></span>
                </ui-select-choices>
              </ui-select>
            </div>

            <div class="" style="margin-top:10px;"
                 ng-show="apiSecurity.type == 'mtls'">
              <div class="alert alert-info">
                 <span class="pficon pficon-info"></span>
                 <span apiman-i18n-key="api-impl.mtsl-info">When using MTLS/Two-Way-SSL you must configure the relevant settings globally in the apiman.properties file.  Please refer to the apiman Installation Guide for details.</span>
              </div>
            </div>

            <div class="panel panel-default" style="margin-top:10px;"
                 ng-show="apiSecurity.type == 'basic'">
              <div class="panel-body">
                <table width="100%"
                       class="form-table">
                  <tr>
                    <td width="1%"
                        nowrap="nowrap"
                        align="right">
                      <span apiman-i18n-key="username-label"
                            class="">Username:</span>
                    </td>
                    <td>
                      <input id="basic-auth.username"
                             ng-model="apiSecurity.basic.username"
                             class="apiman-form-control form-control"
                             width="100%"
                             type="text"
                             ng-disabled="isEntityDisabled()"></input>
                    </td>
                  </tr>
                  <tr>
                    <td width="1%"
                        nowrap="nowrap"
                        align="right">
                        <span apiman-i18n-key="password-label"
                              class="">Password:</span>
                    </td>
                    <td>
                        <input id="basic-auth.password"
                               ng-model="apiSecurity.basic.password"
                               class="apiman-form-control form-control"
                               width="100%"
                               type="password"
                               ng-disabled="isEntityDisabled()"></input>
                    </td>
                  </tr>
                  <tr>
                    <td width="1%"
                        nowrap="nowrap"
                        align="right">
                        <span apiman-i18n-key="confirm-password-label"
                              class="">Confirm Password:</span>
                    </td>
                    <td>
                        <input id="basic-auth.confirm-password"
                               ng-model="apiSecurity.basic.confirmPassword"
                               class="apiman-form-control form-control"
                               width="100%"
                               type="password"
                               ng-disabled="isEntityDisabled()"></input>
                    </td>
                  </tr>
                  <tr>
                    <td width="1%"
                        nowrap="nowrap"
                        align="right"></td>
                    <td>
                      <input ng-model="apiSecurity.basic.requireSSL"
                             type="checkbox"
                             id="require-ssl"
                             ng-disabled="isEntityDisabled()"></input>
                      <label for="require-ssl"
                             apiman-i18n-key="endpoint-security.require-ssl"
                             style="padding-left: 3px">Require transport security (SSL)</label>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            
            <div id="gateway-info"
                 ng-show="gateways.length > 1">
              <hr />
              <div class="title"
                   apiman-i18n-key="gateway">Gateway</div>
              <div class="apiman-label-faded">
                <p apiman-i18n-key="api-impl-gateway-explanation">
                  There are multiple API Gateways configured - you'll need to tell us which one you
                  want to use for this API.
                </p>
              </div>
              <div>
                <span class="clearfix"
                      apiman-i18n-key="publish-to">Publish To:</span>
                <select ng-options="gateway.name for gateway in gateways | orderBy: name"
                        ng-model="selectedGateways"
                        ng-disabled="isEntityDisabled()"
                        class="selectpicker"
                        apiman-select-picker=""
                        multiple>
                </select>
              </div>
            </div>
            
            <div id="no-gateways-info"
                 ng-show="gateways.length == 0">
              <hr />
              <div class="title"
                   apiman-i18n-key="gateway">Gateway</div>
              <div class="alert alert-warning"
                   apiman-i18n-key="api-impl-no-gateways-explanation">
                  There are no API Gateways configured in apiman.  For this reason you will not
                  be able to complete the configuration of your API.  Please contact your
                  apiman administrator - at least one API Gateway must be configured!
              </div>
            </div>
            
            <div id="new-gateway-info"
                 ng-show="autoGateway">
              <hr />
              <div class="title"
                   apiman-i18n-key="gateway">Gateway</div>
              <div class="alert alert-success"
                   apiman-i18n-key="api-impl-new-gateway-explanation">
                  An API Gateway has been added since this API was created.  The new
                  Gateway has been selected for you - all you need to do is click Save below
                  to make it stick.
              </div>
            </div>
            
            <div apiman-permission="apiEdit"
                 ng-show="!isEntityDisabled()"
                 class="actions"
                 style="margin-top: 20px">
              <button ng-disabled="checkValid() === false || isDirty === false || saving === true"
                      ng-click="validateEndpoint()"
                      class="btn btn-primary"
                      type="submit"
                      data-icon="fa-cog">
                <span ng-show="saving" apiman-i18n-key="saving">Saving</span>
                <span ng-hide="saving" apiman-i18n-key="save">Save</span>
              </button>
              <button ng-disabled="!isDirty"
                      ng-click="reset()"
                      class="btn btn-default"
                      data-field="cancelButton"
                      apiman-i18n-key="cancel">Cancel</button>
            </div>
            </form>
          </div>
        </div>
        <!-- /Content -->
      </div>
    </div> <!-- /container -->
  </div>
  </body>
</html>
